<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JQuery01_01</title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				background: red;
				/*display: none;*/
			}
			.div2{
				width: 200px;
				height: 200px;
				background: blue;
			}
			p{
				background: yellow;
				font-size: 30px;
				color: black;
			}
			li {
				width: 200px;
				height: 20px;
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p>
				这是一个p
			</p>
		</div>
		<div class="div2"></div>
		<p>这是我的第一个jQuery文件</p>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
		<h1>标题1</h1>
		<h2>标题2</h2>
		<h4>标题4</h4>
		<h6>标题6</h6>
		<a href="###">这是一个a链接</a>
		<a href="#">这还是一个a链接</a>
		<br />
		<input type="text"  placeholder="输入框" />
		<input type="button" value="按钮" disabled="disabled"/>
		<br />
		<input type="password"  placeholder="请输入密码" />
		<input type="submit"  value="提交" />
		<br />
		<input type="radio"  />
		<input type="checkbox"  />
		<input type="file" />
		<script src="JQuery/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*jQuery是对原生JavaScript的封装,语法更简洁,使用更方便.
				 jq 1.x版本 支持IE 6, 7, 8.
				 jq 2.x版本 不支持IE6, 7, 8.
			 
			 jq的作用
				 1.jq选择器.
				 2.jq可以操作元素.
				 3.jq动画.
				 
			jq的使用:
				1.引入在线的JQuery库
				2.下载jq并引入本地的jq文件
			 */
			
			//jq的选择器
			/*
			 jq选择元素的语法:
			 	$("选择器");
			 */
			//如果要给一个对象设置一个css样式,在css方法里传入两个字符串参数,第一个样式名,第二个样式值.
//			var d1 = $("#div1");
//			d1.css("background","orange");
			
			//如果要给一个对象设置多个css样式,在css方法里传入一个对象,对象里包含想要设置的所有属性名和值.
//			var d2 = $(".div2");
//			d2.css({
//				width:"200px",
//				height:"200px",
//				borderRadius:"50%"
//			});
			//
//			var p1 = $("p");
//			p1.css({
//				backgroundColor:"red",
//				color:"white",
//				fontSize:"50px"
//			});
//			var p2 = $("#div1 p");
//			p2.css("background-color", "red");
			
			//伪类选择器
			//	:first 找到对应的元素的第一个
//			var firstP = $("p:first");
//			firstP.css("border","#0000FF 1px solid");
//			var hoverDiv = $("#div1:hover");
//			hoverDiv.css("background","#000000");

			//	:lasy 	找到对应的元素的最后一个
//			var lastP = $("p:last");
//			lastP.css("border","red solid 5px");
			
			//:even 找到所有对应的偶数元素   从0开始的
//			var evenLis = $("li:even");
//			evenLis.css("background","blue");
			
			//:odd	找到所有的对应的奇数元素   从0开始的
//			var oddLis = $("li:odd");
//			oddLis.css("background","red");
			
			//:eq(index) 	找到若干个相同类型元素里下标为index的元素(index从0开始)
			$("ul li:eq(4)").css("color","red");
			
			//:gt(index)		找到下标大于index的元素
//			$("ul li:gt(7)").css("background-color", "yellow");
			
			//:lt(index)		找到下标小于index的元素,  			
			//如果下标为负,从后往前数.  lt < 0
//			$("ul li:lt(-2)").css("background-color", "#00BFFF");
			
			//:header 获取所有的h1-h6标签
//			$(":header").css("color", "red");
			
			//:hidden 	所有隐藏的标签
//			$("div:hidden").css("display","block");
			//:visible 	所有可见的标签
//			$(":visible").css("border","10px solid black");

			//jq群组选择器写法
//			$("#div1, p, ul").css("background", "#8A2BE2");
			
			//属性选择器 类似于("[type = button]")
//			$("[href]").css("color", "red");	
//			$("[href != '#']").css("color", "purple");	
			
			//跟表单元素有关的jQuery选择器
			//:input			所有的input元素
			//:text			所有type = text的元素
			//:password		所有type = password的元素
			//:radio			所有type = radio	的元素
			//:checkbox		所有type = checkbox的元素
			//:submit		所有type = submit的元素
			//:reset			所有type = reset	的元素
			//:button		所有type = button的元素
			//:image			所有type = image	的元素
			//:file			所有type = file的元素
//			$(":input").css("width", "100px");
//			$(":text").css("background", "red");
//			$(":button").css("background", "blue");
//			$(":password").css("background", "yellow");
//			$(":submit").css("background", "green");
//			$(":radio").attr("checked",");♦️
//			$(":checkbox").css("checked", true);♦️
//			$(":file").css("background", "green");

			//:enabled			所有可用的input标签
			//:disabled			所有禁用的input标签
			//:checked			所有被选中的input标签
			$(":enabled").css("width", "100px");
			$(":disabled").attr("value", "哈哈哈");
			$(":disabled").prop("value", "嘿嘿嘿");
		</script>
	</body>
</html>
